<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta name="author" content="金西振">
  <title></title>
  <style>
    .btn{
      position: fixed;
      left: 100px;
      top: 100px;
    }
    .top{
      left: 200px;
    }
  </style>
</head>
<body>
  <div class="box">
    <button class="btn bottom">返回底部</button>
    <button class="btn top">返回顶部</button>
  </div>
  <main>
    <p>撑开页面1</p>
    <p>撑开页面2</p>
    <p>撑开页面3</p>
    <p>撑开页面4</p>
    <p>撑开页面5</p>
    <p>撑开页面6</p>
    <p>撑开页面7</p>
    <p>撑开页面8</p>
    <p>撑开页面9</p>
    <p>撑开页面10</p>
    <p>撑开页面11</p>
    <p>撑开页面12</p>
    <p>撑开页面13</p>
    <p>撑开页面14</p>
    <p>撑开页面15</p>
    <p>撑开页面16</p>
    <p>撑开页面17</p>
    <p>撑开页面18</p>
    <p>撑开页面19</p>
    <p>撑开页面20</p>
    <p>撑开页面21</p>
    <p>撑开页面22</p>
    <p>撑开页面23</p>
    <p>撑开页面24</p>
    <p>撑开页面25</p>
    <p>撑开页面26</p>
    <p>撑开页面27</p>
    <p>撑开页面28</p>
    <p>撑开页面29</p>
    <p>撑开页面30</p>
    <p>撑开页面31</p>
    <p>撑开页面32</p>
    <p>撑开页面33</p>
    <p>撑开页面34</p>
    <p>撑开页面35</p>
    <p>撑开页面36</p>
    <p>撑开页面37</p>
    <p>撑开页面38</p>
    <p>撑开页面39</p>
    <p>撑开页面40</p>
    <p>撑开页面41</p>
    <p>撑开页面42</p>
    <p>撑开页面43</p>
    <p>撑开页面44</p>
    <p>撑开页面45</p>
    <p>撑开页面46</p>
    <p>撑开页面47</p>
    <p>撑开页面48</p>
    <p>撑开页面49</p>
    <p>撑开页面50</p>
    <p>撑开页面51</p>
    <p>撑开页面52</p>
    <p>撑开页面53</p>
    <p>撑开页面54</p>
    <p>撑开页面55</p>
    <p>撑开页面56</p>
    <p>撑开页面57</p>
    <p>撑开页面58</p>
    <p>撑开页面59</p>
    <p>撑开页面60</p>
  </main>
  <script src="jQuery.js"></script>
<script>
  // $(window).scroll(function() {
  //       if ($(this).scrollTop() != 0) {
  //         $(".top").fadeIn();
  //       } else {
  //         $(".top").fadeOut();
  //       }
  //     });

      $(".top").click(function() {
        $("html").animate(
          {
            scrollTop: 0
          },
          800
        );
      });

      $(".bottom").click(function() {
        $("html").animate(
          {
            scrollTop: $(document).height()
          },
          800
        );
      });
</script>
</body>
</html>